<template>
<div class="addMenus">
  <div class="menusItem">
    <span>菜单名称:</span>
    <Input v-model="menusName" placeholder="Enter something..." clearable style="width: 200px" />
  </div>
  <div class="menusItem">
    <span>图标名称:</span>
    <Input v-model="iconName" placeholder="Enter something..." clearable style="width: 200px" />
  </div>
  <div class="menusItem">
    <span>路由名称:</span>
    <Input v-model="routeName" placeholder="Enter something..." clearable style="width: 200px" />
  </div>
  <div class="menusItem" id="selectMenus">
    <label for="menu">父级菜单:</label>
    <select id="menu" @click="showTable">
      <option v-show="false">{{value}}</option>
    </select>
    <table class="tableMenus" v-show="flag">
      <tr v-for="item in menusData" :key="item.M_PId" @click="selectMenu(item.m_Name)">
        <td class="M_PId">{{item.M_PId}}</td>
        <td class="m_Name">{{item.m_Name}}</td>
      </tr>
    </table>
  </div>
  <Button type="info" style="z-index:5">保存</Button>
  <Button type="warning">更改</Button>
  <Button type="error">删除</Button>

</div>
</template>

<script>
export default {
  data: () => ({
    flag: false,
    menusName: '用户管理',
    iconName: 'ios-grid',
    routeName: 'users',
    value: '菜单管理',
    menusData: [{
        M_PId: 1,
        m_Name: '用户管理',
      },
      {
        M_PId: 2,
        m_Name: '产品管理',
      },
      {
        M_PId: 3,
        m_Name: '菜单管理',
      },
    ],
  }),
  created() {},
  methods: {
    showTable() {
      this.flag = !this.flag
    },
    selectMenu(name) {
      var name = name
      this.value = name
      this.flag = !this.flag
    },
  },
}
</script>

<style lang="less" scoped>
.addMenus {
  padding: 20px 50px;

  .menusItem {
    margin-bottom: 20px;

    span,
    label {
      font-size: 17px;
      vertical-align: middle;
      margin-right: 10px;
      font-family: '宋体';
      font-weight: 600;
    }

    #menu {
      width: 200px;
      height: 32px;
      line-height: 1.5;
      padding: 4px 7px;
      font-size: 14px;
      border: 1px solid #dcdee2;
      border-radius: 4px;
      color: #515a6e;
      background-color: #fff;
    }
  }
}

.ivu-input {
  letter-spacing: 1px;
}

#selectMenus {
  width: auto;
  height: auto;
  position: relative;
}

.tableMenus {
  width: 200px;
  position: absolute;
  top: 32px;
  left: 88px;
  border: 1px solid #dcdee2;
  border-bottom: none;
  border-radius: 4px;
  background: #fff;

  tr {
    td {
      font-size: 14px;
      color: #515a6e;
      background-color: #fff;
      border-bottom: 1px solid #dcdee2;
    }

    .M_PId {
      width: 30px;
      text-align: center;
      border-right: 1px solid #dcdee2;
    }

    .m_Name {
      padding: 0px 5px;
    }
  }
}

button {
  margin-right: 50px;
  margin-top: 20px;
}
</style>
